<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tam - Creative Portfolio Template</title>
    <meta name="description" content="Tam - Creative Portfolio Template"/>
    <meta name="keywords"
          content="blog, business card, creative, creative portfolio, cv theme, online resume, personal, portfolio, professional cv, responsive portfolio, resume, resume theme, vcard"/>
    <meta name="author" content="beingeorge"/>
    <meta name="theme-color" content="#2a2d35">

    <!-- Vendor Css-->
    <link rel="stylesheet" href="../static/css/vendor.css"/>
    <link rel="stylesheet" href="../static/css/LineIcons.min.css"/>

    <!-- TamTemplate style Css -->
    <link href="../static/css/tam.css" rel="stylesheet">

    <!-- Custom style Css -->

</head>

<body data-spy="scroll" data-target=".navbar">

<!-- START: Preloader -->
<div id="preloader" class="preloader">
    <div class="spinner-grow text-dark" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>
<!-- END: Preloader -->

<!-- START: Aside -->
<aside class="aside">
    <!-- START: NAVBAR -->

    <div class="nav-wrapper">

        <div class="navbar-toggler">
            <svg class="ham hamRotate ham1" viewBox="0 0 100 100" width="60">
                <path class="line top"
                      d="m 30,33 h 40 c 0,0 9.044436,-0.654587 9.044436,-8.508902 0,-7.854315 -8.024349,-11.958003 -14.89975,-10.85914 -6.875401,1.098863 -13.637059,4.171617 -13.637059,16.368042 v 40"/>
                <path class="line middle" d="m 30,50 h 40"/>
                <path class="line bottom"
                      d="m 30,67 h 40 c 12.796276,0 15.357889,-11.717785 15.357889,-26.851538 0,-15.133752 -4.786586,-27.274118 -16.667516,-27.274118 -11.88093,0 -18.499247,6.994427 -18.435284,17.125656 l 0.252538,40"/>
            </svg>
        </div>

        <nav class="navbar text-center align-items-center justify-content-center">


            <div class="collapse navbar-collapse show" id="navbarCollapse">
                <div class="about-avatar mb-5">
                    <a href="/">
                        <img src="../static/images/about.jpg" alt=""
                             class="img-fluid mx-auto d-block shadow-sm rounded-full">
                    </a>

                    <div class="about-avatar-details mt-4">
                        <h1>Alice Joseph</h1>
                        <p class="badge">UI Designer</p>
                    </div>

                </div>
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="/"><i class="lni-home"></i>Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/resume"><i class="lni-briefcase"></i>resume</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/work"><i class="lni-graduation"></i>Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/services"><i class="lni-offer"></i>Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/blog"><i class="lni-pencil"></i></i>Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/contact"><i class="lni-phone-handset"></i>Contact</a>
                    </li>
                </ul>
            </div>

            <!--               	<div class="aside-footer">-->
            <!--                	<ul class="list-unstyled list-inline">-->
            <!--                        <li class="list-inline-item"><a href="#"><i class="lni-facebook-filled"></i></a></li>-->
            <!--                        <li class="list-inline-item"><a href="#"><i class="lni-skype"></i></i></a></li>-->
            <!--                        <li class="list-inline-item"><a href="#"><i class="lni-youtube"></i></a></li>-->
            <!--                        <li class="list-inline-item"><a href="#"><i class="lni-linkedin-original"></i></a></li>-->
            <!--                    </ul>-->
            <!--                </div>-->
        </nav>
    </div>
    <!-- END: NAVBAR -->
</aside>
<!-- START: Aside -->

<div class="page-overlay">
    <span class="overlay-1"></span>
    <span class="overlay-2"></span>
</div>

<div class="page-wrapper">

    <!-- START: HOME -->
    <section class="section-home " id="home">
        <div class="glass">欢迎您的到来</div>
        <!-- <img src="assets/images/banner.jpg" /> -->
    </section>
    <!-- END: HOME -->

    <!-- START: ABOUT -->
    <section class="section section-about" id="about">
        <div class="container">
            <div class="section-head">
                <span>简介</span>
                <h2>关于我</h2>
            </div>
            {% for item in myself_info %}
            <div class="row justify-content-center align-items-center">
                <div class="col-md-6">
                    <img class="about-img img-fluid wow fadeInUp" data-wow-duration="1s"
                         src="../static/images/avatar.jpg" alt="About Picture">
                </div>
                <div class="col-md-6">
                    <div class="about-desc wow fadeInUp" data-wow-duration="1s" data-wow-delay="500ms">
                        <div class="about-desc-content">
                            <h1 class="font-weight-light mb-5">{{ item.Name }}</h1>
                            <p class="font-weight-light my-3">{{item.Self_Introduce}}</p>

                        </div>

                        <div class="about-desc-more text-left mt-5">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="about-desc-info">
                                        <b>年龄 : </b>
                                        <span>{{item.Age}}</span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="about-desc-info">
                                        <b>地址 : </b>
                                        <span>{{item.Address}}</span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="about-desc-info">
                                        <b>掌握程度 : </b>
                                        <span>{{item.Mastery_Degree}}</span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="about-desc-info">
                                        <b>毕业于 : </b>
                                        <span>{{item.University}}</span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="about-desc-info">
                                        <b>电话 : </b>
                                        <a href="tel:{{item.Telephone}}">{{item.Telephone}}</a>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="about-desc-info">
                                        <b>邮箱 :</b>
                                        <a href="mailto:{{item.Mailbox}}">{{item.Mailbox}}</a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

            </div>
            {% endfor %}
        </div>

        <div class="container mt-5 pt-3">
            <div class="section-head ">
                <span>能力</span>
                <h2>我的技能</h2>
            </div>

            <div class="section-skills-wrap">
                <div class="row">
                    <div class="col-md-6">
                        <p>Proin laoreet elementum ligula, ac tincidunt lorem accumsan nec. Fusce eget urna ante. Donec
                            massa velit, varius a accumsan ac, tempor iaculis massa. Sed placerat justo sed libero
                            varius vulputate. Ut a mi tempus massa malesuada fermentum.</p>
                        <p> tempor iaculis massa. Sed placerat justo sed libero varius vulputate. Ut a mi tempus massa
                            malesuada fermentum.</p>
                    </div>

                    <div class="col-md-6">
                        <div class="resume-panel">
                            <div class="mb-4 wow fadeInUp" data-wow-duration="1.5s">
                                <h6>Graphic Design </h6>
                                <div class="progress mt-2">
                                    <div class="progress-bar" role="progressbar" style="width: 95%;" aria-valuenow="95"
                                         aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>

                            <div class="mb-4 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".2s">
                                <h6>Logo Design</h6>
                                <div class="progress mt-2">
                                    <div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75"
                                         aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>

                            <div class="mb-4 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".3s">
                                <h6>Logo Design</h6>
                                <div class="progress mt-2">
                                    <div class="progress-bar" role="progressbar" style="width: 85%;" aria-valuenow="85"
                                         aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>

                            <div class="mb-0 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".4s">
                                <h6>Photoshop & Figma</h6>
                                <div class="progress mt-2">
                                    <div class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="80"
                                         aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- END: ABOUT -->

    <!-- START: SERVICES -->
    <section class="section section-dark section-services" id="services">
        <div class="container">
            <div class="section-head">
                <span>WHAT I DO</span>
                <h2>My Services</h2>
            </div>

            <div class="row mt-4">
                <div class="col-sm-6 col-lg-6">
                    <div class="services-list b-box hover-state p-4 mt-4 wow fadeInUp" data-wow-duration="1.5s">
                        <div class="services-list-icon">
                            <i class="lni-color-pallet"></i>
                            <span>01</span>
                        </div>
                        <div class="mt-4">
                            <h5 class="mb-0">Graphic Design</h5>
                            <p class=" mt-3">Modern and mobile-ready website that will help of your marketing. Proin
                                laoreet elementum ligula, ac tincidunt lorem accumsan nec.</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-6">
                    <div class="services-list b-box hover-state p-4 mt-4 wow fadeInUp" data-wow-duration="1.5s"
                         data-wow-delay=".2s">
                        <div class="services-list-icon">
                            <i class="lni-laptop-phone"></i>
                            <span>02</span>
                        </div>
                        <div class="mt-4">
                            <h5 class="mb-0">Web Development</h5>
                            <p class=" mt-3">Modern and mobile-ready website that will help of your marketing. Proin
                                laoreet elementum ligula, ac tincidunt lorem accumsan nec.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 text-center mt-5 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".5s">
                    <a href="/services/" class="btn hover-state">View All</a>
                </div>
            </div>
        </div>
    </section>
    <!-- END: SERVICES -->


</div>


<!-- JAVASCRIPTS -->

<script src="../static/js/vendor.js"></script>

<!-- Map -->
<script src="../static/js/map.js"></script>
<script src="https://ditu.google.cn/maps/api/js?key=AIzaSyD79MY72taVRlZVX2DU6L5PXOh3ezUUKMc&amp;callback=initMap"
        async="" defer=""></script>

<!-- Custom Js -->
<script src="../static/js/custom.js"></script>
</body>
</html>
